<template>
    <div class="tooler">
        <div class="tooler-insert">
            <button @click="$emit('dispatch:insertLayer', 'image')">
                <svg-icon name="tooler-image" />
                <span>Add image</span>
            </button>
            <button @click="$emit('dispatch:insertLayer', 'text')">
                <svg-icon name="tooler-text" />
                <span>Add text</span>
            </button>
        </div>

        <!-- 空状态 -->
        <div class="tooler-nodata" v-if="!activePiece || activePiece.layers.length == 0">
            <figure>
                <svg-icon name="tooler-nodata" />
            </figure>
            <h2>Print file requirements</h2>
            <p>
                • JPG or PNG <br />
                • Max 50 MB<br />
                <!-- •  Recommended size <strong>3300 × 4500 px</strong><br> -->
                <!-- •  Maximum resolution <strong>23000 x 23000 px</strong><br> -->
            </p>
        </div>

        <!-- 图层列表 -->
        <div class="tooler-list" v-else>
            <draggable v-model="layerReverse" @start="dragStart()" @end="dragEnd()" v-bind="dragOptions">
                <transition-group type="transition">
                    <component v-for="item in layerReverse" :key="item.id" :is="item.component" :layer="item.layer"
                        :piece="activePiece" :mapper="activeMapper" :active="item.layer == activeLayer">
                        <button @click.stop="copyLayer(item.layer)" class="iconfont icon-fuzhi"></button>
                        <button @click.stop="removeLayer(item.layer)" class="iconfont icon-liebiao-shanchu"></button>
                        <!-- <button class="iconfont icon-liebiaotuodong handle"></button> -->
                    </component>
                </transition-group>
            </draggable>
        </div>

    </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
    components: {
        draggable: draggable,
    },
    props: {
        activeSurface: { type: Object, default: null },
        activePiece: { type: Object, default: null },
        activeLayer: { type: Object, default: null },
    },
    data () {
        return {
            cache: null,
            drag: true,
            dragOptions: {
                animation: 200,
                handle: ".handle",
                axis: "y",
                // group: "description",
                disabled: false,
                // ghostClass: "ghost",
                direction: "horizontal", // 拖拽方向 (默认情况下会自动判断方向)
            },
        };
    },
    computed: {

        // 倒序
        layerReverse: {
            get () {
                let piece = this.activePiece || {};
                let layers = (piece.layers || []).slice(0);
                let name = {
                    image: 'CommonDesignToolerImage',
                    text: 'CommonDesignToolerText',
                }
                layers.reverse();
                return layers.map(layer => {
                    return {
                        id: layer.id,
                        component: name[layer.type],
                        layer: layer,
                    }
                })
            },
            set (list) {
                let copy = list.slice(0).reverse();
                let layers = copy.map(item => item.layer);
                this.$emit('dispatch:updateLayer', { type: 'sort', layers: layers })
            },
        },

        // 映射区
        activeMapper () {
            if (this.activeSurface && this.activePiece) {
                const piece = this.activePiece;
                const surface = this.activeSurface;
                const mapperIndex = surface.mapping.findIndex(mapper => mapper.canvas_name == piece.canvas_name);
                const mapperActive = surface.mapping[mapperIndex];
                return mapperActive;
            } else {
                return null;
            }
        },
    },
    methods: {
        // 复制图层
        copyLayer (layer) {
            console.log(layer, 'layer');
            this.$emit('dispatch:updateLayer', { type: 'copy', layer: layer })
        },

        // 删除图层
        removeLayer (layer) {
            this.$emit('dispatch:updateLayer', { type: 'remove', layer: layer })
        },

        // // 插入文字
        // insertText () {
        //     if (!this.fonts_loaded) {
        //         DesignResource.loadAllFont();
        //         this.fonts_loaded = true;
        //     }
        //     this.$emit("global:DESIGN_INSERT_TEXT");
        // },

        // 拖动开始前
        dragStart () {
            this.drag = true;
            this.cache = this.activeLayer;
        },

        // 拖动结束
        dragEnd () {
            this.drag = false;
            if (this.activeLayer != this.cache) {
                this.$emit('dispatch:updateLayer', { type: 'active', layer: this.cache })
            }
        },
    },

    created () {
    },
};
</script>
<style lang="scss" scoped>
.tooler {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tooler-insert {
    height: 48px;
    padding: 24px 10px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;

    i {
        display: inline-block;
        vertical-align: top;
        margin-right: 4px;
        font-size: 20px;
    }

    button {
        flex: 1;
        max-width: 160px;
        height: 48px;
        background: #ffffff;
        border-radius: 6px;
        margin: 0 4px;
        border: 2px solid #f6b2cd;
        color: #ea4c89;
        white-space: nowrap;
        text-align: center;
        padding: 0 4px;
        display: flex;
        justify-content: center;
        align-items: center;

        &>svg {
            width: 24px;
            height: 24px;
            background-size: 24px 24px;
            vertical-align: top;
            position: relative;
            margin-right: 4px;
            fill: #ea4c89;
            margin-top: -1px;
        }

        &>span {
            font-size: 18px;
            line-height: 48px;
            font-family: Roboto-Medium;
            font-weight: normal;
        }

        &:hover {
            background: #ffedf4;
        }

        // 禁用
        &[disabled],
        &.disabled {
            background: #f6f6f6;
            border-color: #dcdcdc;
            color: #919191;
            cursor: default;

            &>svg {
                fill: #919191;
            }

            &:hover {
                background: #f6f6f6;
            }
        }
    }
}

.tooler-nodata {
    flex: 1;
    position: relative;
    display: flex;
    overflow: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 45px 20px;
    box-sizing: border-box;

    figure {
        max-width: 100%;
        width: 194px;
        position: relative;

        &:before {
            content: '';
            display: block;
            padding-bottom: 100%;
            height: 0;
        }

        svg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }

    h2 {
        margin-top: 18px;
        font-size: 24px;
        font-family: Roboto-Medium, Roboto;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
    }

    p {
        margin-top: 10px;
        font-size: 14px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        color: #555555;
        line-height: 24px;
    }
}

.tooler-list {
    flex: 1;
    padding-bottom: 16px;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 0px;
    }

    &::v-deep .layer {
        margin: 16px 16px 0;
        position: relative;
        border-radius: 6px;
        background: #ffffff;

        .handle {
            cursor: move;
        }

        &:before {
            content: '';
            position: absolute;
            inset: 0px;
            border: 1px solid #c6c6c6;
            border-radius: 6px;
            pointer-events: none;
        }

        &.layer-image .layer-info figure {
            border: 1px solid #d9d9d9;
            background: rgba(0, 0, 0, 0.02);
            box-sizing: border-box;
        }

        .layer-info {
            display: flex;
            position: relative;
            height: 60px;
            line-height: 60px;
            align-items: center;
            cursor: pointer;
            border-radius: 6px 6px 0 0;

            .handle {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
            }

            figure {
                margin-left: 10px;
                width: 40px;
                height: 40px;
                position: relative;
                overflow: hidden;
                border-radius: 4px;

                img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    text-indent: -999em;
                }

                i.iconfont {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 50px;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    font-size: 40px;
                    font-weight: normal;
                }
            }

            // h2{
            // 	position: relative;
            // 	margin-left: 12px;
            // 	margin-right: 12px;
            // 					}

            h2 {
                position: relative;
                flex: 1;
                display: flex;
                flex-direction: column;
                padding: 0 6px;
                line-height: 40px;
                user-select: none;
                white-space: nowrap;
                overflow: hidden;
                pointer-events: none;
                font-size: 18px;
                font-weight: bold;
                color: #000;
                font-weight: normal;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                strong {
                    display: block;
                    height: 20px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #000000;
                    line-height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-weight: normal;
                }

                span {
                    display: block;
                    height: 20px;
                    line-height: 20px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #555555;
                    font-weight: normal;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .layer-info-button {
                display: flex;
                margin-right: 10px;

                button {
                    position: relative;
                    margin: 0 6px;
                    padding: 0;
                    border: none;
                    background: none;
                    width: 24px;
                    height: 24px;
                    font-size: 20px;
                    font-weight: normal;
                    color: #666;

                    &:hover {
                        color: #ea4c89;
                    }
                }
            }
        }

        .layer-factor {
            display: none;
            padding-bottom: 12px;
        }

        .factor-text {
            display: block;
            margin: 16px 18px 0;

            input {
                width: 100%;
                height: 32px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #d9d9d9;
                box-sizing: border-box;
                padding: 6px 50px 6px 12px;
                font-size: 14px;
                color: #000000;

                &:hover {
                    border-color: #f6b2cd;
                }

                &:focus {
                    border-color: #ea4c89;
                }
            }
        }

        .factor-color {
            display: flex;
            // flex-wrap: wrap;
            padding: 0 12px;
            align-items: flex-end;

            .factor-color-family {
                flex: 1;
                // height: 32px;
                margin: 0 6px 0;
                // min-width: 100px;
                display: flex;
                flex-direction: column;

                &>span {
                    white-space: nowrap;
                    height: 14px;
                    font-size: 12px;
                    color: #666;
                    line-height: 14px;
                    text-align: left;
                    margin-bottom: 4px;
                }

                .el-select .el-input {
                    input {
                        height: 32px;
                        line-height: 32px;
                        background: #ffffff;
                        border-radius: 4px;
                        border: 1px solid #d9d9d9;
                        box-sizing: border-box;
                        padding: 6px 20px 6px 12px;
                        font-size: 14px;
                        color: #000000;
                    }

                    .el-input__suffix {
                        right: 0;
                        width: 20px;
                    }

                    .el-input__icon {
                        width: 100%;
                        text-align: center;
                        line-height: 32px;
                        font-family: 'iconfont' !important;
                        font-size: 12px;
                        font-style: normal;
                        -webkit-font-smoothing: antialiased;
                        color: #000;

                        &::before {
                            content: '\e650';
                        }
                    }

                    &:hover {
                        input {
                            border-color: #f6b2cd;
                        }

                        .el-input__icon {
                            color: #ea4c89;
                        }
                    }

                    &.is-focus {
                        input {
                            border-color: #ea4c89;
                        }

                        .el-input__icon {
                            color: #ea4c89;
                        }
                    }
                }
            }

            .factor-color-flex {
                display: flex;
                flex: 1;
                justify-content: space-between;

                &>* {
                    flex: 1;
                    margin: 14px 6px 0;

                    .input-color {
                        padding-top: 18px;

                        &>span {
                            position: absolute;
                            left: 50%;
                            top: 0;
                            transform: translateX(-50%);
                        }
                    }

                    &:nth-child(3) .input-color span {
                        margin-left: 3px;
                    }
                }
            }
        }

        .factor-input {
            display: flex;
            flex-wrap: wrap;
            padding: 0 12px;

            &>.input-number {
                width: 50%;
                margin-top: 16px;
                padding: 0 6px;
                box-sizing: border-box;
            }
        }

        .factor-slider {
            padding: 18px 20px 0;

            .input-slider {
                margin-top: 6px;
            }
        }

        .factor-align {
            margin-top: 16px;
            padding: 0 18px;
            display: flex;
            justify-content: space-between;

            button {
                margin: 5px 0;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                background: none;
                border: none;
                font-size: 22px;
                color: #666;
                position: relative;

                &:nth-child(3) {
                    margin-right: 20px;
                }

                svg {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 24px;
                    height: 24px;
                    color: #555;
                }

                &:hover {
                    svg {
                        color: #ea4c89;
                    }
                }
            }
        }

        .factor-flip {
            margin-top: 8px;
            padding: 0 18px;
            display: flex;
            justify-content: space-between;

            button {
                margin: 10px 0;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                background: none;
                border: none;
                font-size: 22px;
                color: #666;
                position: relative;

                &:nth-child(3) {
                    margin-right: 20px;
                }

                svg {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 24px;
                    height: 24px;
                    color: #555;
                }

                &.active,
                &:hover {
                    svg {
                        color: #ea4c89;
                    }
                }
            }
        }

        &:hover {
            &:before {
                border-color: #ea4c89;
            }
        }

        &.notify {
            &:before {
                border-color: rgb(244, 67, 54);
            }
        }

        &.active {
            &:before {
                border-color: transparent;
                box-shadow: 0 0 0 2px #fce6ee;
            }

            .layer-info {
                background: #f7f7f7;

                label:before {
                    display: block;
                }

                input {
                    text-indent: 12px;
                    pointer-events: all;
                }
            }

            .layer-factor {
                display: block;
            }
        }
    }
}

@media screen and (max-width: 1440px) {
    .tooler-nodata .nodata-notify {
        h2 {
            font-size: 12px;
        }

        p {
            font-size: 12px;
        }
    }
}
</style>
